<template>
  <div>
    <!-- 高级查询 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="formInline.name" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="formInline.address" placeholder="地址"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <!-- 新增按钮 -->
      <el-button type="primary" @click="addUser">新增</el-button>
    </el-form>
    <!-- 新增对话框 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="姓名">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="出生日期">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.createTime" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="form.phone" ></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
          <el-form-item label="邮编">
            <el-input v-model="form.email"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addClick">确定</el-button>
          </el-form-item>
        </el-form>
      </span>
    </el-dialog>
    <!-- el-table表格标签 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column fixed prop="name" label="姓名" width="150"> </el-table-column>
      <el-table-column prop="createTime" label="出生日期" width="150"> </el-table-column>
      <el-table-column prop="phone" label="电话" width="150"> </el-table-column>
      <el-table-column prop="address" label="地址" width="300"> </el-table-column>
      <el-table-column prop="email" label="邮编" width="300"> </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <!-- 修改按钮 -->
          <el-button type="primary" icon="el-icon-edit" @click="updateClick(scope.row)" circle></el-button>
          <!-- 删除按钮 -->
          <el-button type="danger" icon="el-icon-delete" @click="deleteClick(scope.row)" circle></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <!--
      layout="total, sizes, prev, pager, next, jumper" 设置布局
      align="right" 设置 左 中 又
      page-size="100" 设置每一页条数
      total="400" 设置总条数
    -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        align="right"
        :current-page="currentPage4"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    </div>
</template>

<script>
    export default {
      name: "user",
      methods: {
        /* 删除绑定事件 */
        deleteClick(row) {
          /* 删除成功就刷新一次页面 */
          this.delUser(row)
          this.$confirm('是否删除该用户, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if(this.delete.success){
              this.$message({
                type: this.delete.success,
                message: this.delete.msg,
              });
              this.getUserList()
            } else {
              this.$message({
                type: this.delete.success,
                message: '删除失败',
              });
            }
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });

        },
        delUser(val){
          console.log(val)
          /* 发送请求删除请求，并传入id */
          this.$http.delete("/user/delete",{id:val.id}).then(res=>{
             this.delete = res.data,
            console.log(this.delete)
          })
        },
        /*  修改绑定事件 */
        updateClick(row) {
          /* 回显 */
          this.form.id = row.id,
          this.form.name = row.name,
          this.form.createTime = row.createTime,
          this.form.phone = row.phone,
          this.form.address = row.address,
          this.form.email = row.email,
          this.dialogVisible = true
        },
        /* 分页的方法 */
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
        },
        /* 分页数据 */
        handleCurrentChange() {
          this.getUserList()
        },
        /* 获得数据 */
        getUserList(){
          /* 发送请求，获得数据 */
          this.$http.get("/user/list",{}).then(res=>{
            this.tableData = res.data.rows,
            /* 设置总条数 */
            this.total = res.data.total
          })
        },
        /* 点击添加事件 */
        addUser(){
          // this.form.id = null,
          // this.form.name = null,
          // this.form.createTime = null,
          // this.form.phone = null,
          // this.form.address = null,
          // this.form.email = null,
          this.form=Object.assign({},undefined)
          /* 弹出添加框 */
          this.dialogVisible = true
        },
        /* 新增对话框 */
        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {});
        },
        /* 关闭添加框 */
        addClick() {
          this.getUserList(),
          this.dialogVisible = false
        },
        /* 高级查询点击事件 */
        onSubmit() {
          console.log('submit!');
          this.getUserList();
        }
      },
      data() {
        return {
          tableData:[],
          delete: null,
          /* 高级查询表单数据 */
          formInline: {
            name: '',
            address: ''
          },
          /* 将分页需要变更的数据设置到data中 */
          pageSizes:[5, 10, 20, 50],
          pageSize:10,
          total:0,
          dialogVisible: false,
          /* 添加框的数据 */
          form: {
            id:null,
            name: null,
            createTime: null,
            phone:null,
            address:null,
            email:null,
          },
        }
      },
      /* 项目运行就会初始化数据 */
      mounted() {
        this.getUserList()
      }
    }
</script>

<!-- css样式 -->
<style scoped>

</style>
